import React, { useEffect, useState } from 'react';
import { Button, Card, Form, Table, Space, Input, Tag, Modal  } from 'antd';
import { Loading3QuartersOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
const { Column, ColumnGroup } = Table;
import { history } from 'umi';
import store from '@/redux/store'
import { setCrumb } from '@/redux/actions/index.js';
import './index.less'


function GroupSup(props) {
  const [searchForm] = Form.useForm()
  const [search_data,set_search_data]= useState({firstName: "",lastName:""})
  const [table_data, set_table_data] = useState([]);
  const [page, set_page] = useState(1);
  const [page_size, set_page_size] = useState(10);
  const [total, set_total] = useState(0);
  const [del_modal_show, set_del_modal_show] = useState(false);
  const [edit_modal_show, set_edit_modal_show] = useState(false);
  const [row, setRow] = useState({});
  const [edit_type, set_edit_type] = useState('');
  useEffect(()=>{
    let data = [
      {key: '001',firstName: 'John1',lastName: 'jack1',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '002',firstName: 'John2',lastName: 'jack2',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '003',firstName: 'John3',lastName: 'lucy3',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '004',firstName: 'John4',lastName: 'lucy4',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '005',firstName: 'John5',lastName: 'lucy5',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '006',firstName: 'John6',lastName: 'Yiminghe6',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '007',firstName: 'John7',lastName: 'Yiminghe7',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '008',firstName: 'John8',lastName: 'Yiminghe8',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '009',firstName: 'John9',lastName: 'Brown9',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0010',firstName: 'John10',lastName: 'Brown10',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0011',firstName: 'John11',lastName: 'Brown11',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
      {key: '0012',firstName: 'John12',lastName: 'Brown12',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer']},
    ]
    set_table_data(data)
    set_total(data.length)
  },[])
  const toQuery = () => {
    console.log(searchForm.getFieldsValue())
  }
  const toReset = () => {
    set_search_data({
      firstName: "",
      lastName:"",
    })
  }
  const openEditModal = (row,type) => {
    setRow(row)
    set_edit_type(type)
    history.push('/GroupPage/Edit')
  }
  const openDelModal = (row,type) => {
    setRow(row)
    set_edit_type(type)
    set_del_modal_show(true)
  }
  const changePage = (page,page_size) => {
      console.log('changePage-----',page,page_size)
  }
  const toDel = () => {
    let data = JSON.parse(JSON.stringify(table_data))
    let checkIndex = data.findIndex((item)=>item.key == row.key)
    if(checkIndex>-1){
      data.splice(checkIndex,1)
    }
    set_table_data(data)
    set_total(data.length)
    set_del_modal_show(false)
  }
  const delCancel = () => {
    set_del_modal_show(false)
  }
  return (
    <div className="sup_con">
      <Card className="mb12">
        <Form
          layout="inline"
          form={searchForm}
          initialValues={search_data}
        >
          <Form.Item label="FirstName" name="firstName">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="LastName" name="lastName">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item>
            <Button icon={<Loading3QuartersOutlined />} onClick={toReset} className="mr20">重置</Button>
            <Button icon={<SearchOutlined />} type="primary" className="mr20" onClick={toQuery}>搜索</Button>
            <Button icon={<PlusOutlined />} className="success-btn" onClick={openEditModal}>新增</Button>
          </Form.Item>
        </Form>
      </Card>
      <Card>
        <Table
          dataSource={table_data}
          bordered={true}
          size={'small'}
          pagination={{
            current:page,
            pageSize:page_size,
            total:total,
            showQuickJumper:true,
            showSizeChanger:true,
            pageSizeOptions:[5,10,20],
            onChange:changePage,
          }}
        >
          <ColumnGroup title="Name">
            <Column title="First Name" dataIndex="firstName" key="firstName" />
            <Column title="Last Name" dataIndex="lastName" key="lastName" />
          </ColumnGroup>
          <Column title="Age" dataIndex="age" key="age" />
          <Column title="Address" dataIndex="address" key="address" />
          <Column
            title="Tags"
            dataIndex="tags"
            key="tags"
            render={(tags) => (
              <>
                {tags.map((tag) => (
                  <Tag color="blue" key={tag}>
                    {tag}
                  </Tag>
                ))}
              </>
            )}
          />
          <Column
            title="Action"
            key="action"
            render={(_ ,record) => (
              <Space size="middle">
                <p className="default-btn-nobg" onClick={openEditModal.bind(_,record,'look')}>详情</p>
                <p className="default-btn-nobg" onClick={openEditModal.bind(_,record,'edit')}>编辑</p>
                <p className="error-btn-nobg" onClick={openDelModal.bind(_,record,'del')}>删除</p>
              </Space>
            )}
          />
        </Table>
      </Card>
      <Modal title="确定删除此数据吗？" open={del_modal_show} onOk={toDel} onCancel={delCancel}/>
    </div>
  );
}

export default GroupSup;
